javascript(DOM)(DAY19)

13th鐵人賽

Vince

2021-10-02 08:43:35

888 瀏覽

分享至

在上一篇文章中說明了javascript的DOM和event是什麼，而這篇文章會介紹如何利用上一篇所認識的一些DOM屬性來簡單的完成一個小小的例子。

動態留言板

這個例子將會使用一些DOM屬性來完成一個非常簡易的動態的留言板，只要使用者在輸入欄位輸入自己想留言的字，接著使用者就可以將留言的字動態的加入到網頁內容中讓自己看到!在這個範例中，因為是非常簡易版的，只是利用DOM來測試看看它帶給我們什麼樣的功能，所以使用者自己輸入留言板時，只有自己看得到，別人瀏覽此網頁時是還無法看到自己留的言的，且重新進入網頁後，之前留的言也是看不到的。在這邊就開始來建立一個簡單的留言板吧!

Example

1. 原始的樣子:

2. 新增第一則留言:

3. 新增第二則留言:

<head>
    <style>
        body {
            text-align: center;
            background-color: antiquewhite
        }
        #area1 {
            font-size: x-large;
        }
        #area2 {
            padding: 6px 10px;
            width: 50%;
            height: 200px;
            margin-bottom: 1em;
            overflow-y: scroll;
            /*overflow用意是若文字超過預設區塊大小，將會自動加大區塊或加入滾軸*/
            border: 2px solid;
            position: relative;
            left: 25%;
            background-color: azure;
            font-size: x-large;        
        }
        #count {
            font-size: x-large;
            color:red;
        }
    </style>
    <script>
        function add() {
            var message = document.getElementById("area1"); 
            var textnode = document.createTextNode("user:" + message.value);
            //將textarea內的文字建立文字節點
            var br = document.createElement("br");
            //建立br換行元素節點
            var area = document.getElementById("area2")
            area.appendChild(textnode);
            //將textnode文字節點加入area(id="area2")的子節點
            area.appendChild(br);
            //將br元素節點加入area(id="area2")的子節點
            document.getElementById("count").innerText = area.children.length;
            //總共有多少個文字節點(共多少則留言)
            //br元素節點不算在children.length的長度中，而是算在屬性childrenNodes.length中
        }
    </script>
</head>
<body style="">
    <form>
        <h1>留言版</h1><hr />
        <textarea id="area1" name="area" rows="8" cols="30" placeholder="在此留言!"></textarea><br />
        <input type="button" value="新增留言" onclick="add()" /><br />
        <p>現在有<span id="count">0</span>則留言</p>
        <div id="area2"></div>
    </form>
</body>

結語
這篇文章介紹了如何實際用DOM的元素來達成一個簡易的留言板，將上一篇所認識的元素稍微透過例子做了小小的統整。而下一篇會介紹幾個常用的event事件以及addEventListener()監聽事件喔!